How can I dynamically load a static resource image in LWC? – Technical

Table of Contents

I am trying to dynamically load an image from a static resource within LWC. When the user loads the page, a query parameter is provided called locationCode. Depending on the locationCode, a different static resource will be used. The static resources have a format similar to Resource_Images_XX, where XX is the locationCode.

1 Go to Home page 2 Click Setup (Gear Icon) and select Edit Page. 3 Under Custom Components, find your staticResourceLWCExample component and drag it on right hand side top. 4 Click Save and activate.

Is it possible to dynamically load a resource name?

Loading a dynamic resource name directly is not supported; this is because the compiler will verify the resource name before successfully compiling, reducing the odds of typos or accidental removal of used resources. I want to thank sfdcfox for his answer. Officially, dynamic resource loading is not supported.

First, Import static resources from the @salesforce/resourceUrl scoped module. Static resources can be archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files. myResource 鈥擜 name that refers to the static resource.

I am trying to dynamically load an image from a static resource within LWC. When the user loads the page, a query parameter is provided called locationCode. Depending on the locationCode, a different static resource will be used. The static resources have a format similar to Resource_Images_XX, where XX is the locationCode.

Aura is a 2-way binding framework and LWC is a 1-way framework. Using Aura, we can create components dynamically but in LWC dynamic creation of components is not allowed (not exposed). And the main difference is Aura tries to modify the same object/array in view (or HTML) when its changed in Javascript.

1 Go to Home page 2 Click Setup (Gear Icon) and select Edit Page. 3 Under Custom Components, find your staticResourceLWCExample component and drag it on right hand side top. 4 Click Save and activate.

Loading a dynamic resource name directly is not supported; this is because the compiler will verify the resource name before successfully compiling, reducing the odds of typos or accidental removal of used resources. I want to thank sfdcfox for his answer. Officially, dynamic resource loading is not supported.